<template>
	<view>
		<!-- 悬浮按钮 -->
		<view class="launch public-open-app" v-if="showIcon">
			<button class="button" @click="goShow">
				<img src='@/static/img/jm.png'></text>
			</button>

		</view>
		<!-- 提交信息 -->
		<uni-popup id="dialogInput" ref="dialogInput" type="dialog" @change="change" class="login home-dialog hint-dialog">
			<div id="popDiv" class="mydiv">
				<div class="my_nav"></div>
				<div class="tc_title"></div>
				<a @click='dialogClose' class="close"></a>
				<form class="tc_img" @submit="formSubmit" @reset="formReset">
					<div class="index_st16">
						<div class="st16_1">槟榔加盟咨询</div>
						<input class="st16_2" placeholder="请填写手机号" :value="phone" @input="inputAction" name="phone" type="number" />

						<div class="st16_2"><input class="st16_2" style="margin: 0;border-bottom: 0;" placeholder="验证码" name="code" type="string" />
							<button class="st16_3" @tap="sendCode" :disabled="disabled">{{send}}</button></div>
						<textarea class="st16_6" placeholder-style="color:" placeholder="请填写留言" name="txt" />
						<button class="st16_4" form-type="submit">提交</button>
						<div class="st16_5">我们会对所有信息进行加密。</div>
					</div>
				</form>				
			</div>			
		</uni-popup>
	</view>
</template>

<script>
	var _this = this
	// 审核提交内容
	var graceChecker = require("@/common/graceChecker.js");
	export default {
		watch: {
			// open发生变化就会触发
			open() {
				this.goShow()
			}
		},
		props: {		
			open: {
				default: false
			},
			
			showIcon: {
				default: true
			}	
		},
		// 类似于onload
		mounted() {
			// console.log('form mounted')
		},
		data() {
			return {
				disabled: false,
				send: '获取验证码',				
				phone: ''
			}
		},
		methods: {
			change(e) {
				// console.log('popup ' + e.type + ' 状态', e.show)
			},
			inputAction: function(event) {
				console.log(event.detail.value)
				this.phone = event.detail.value;
			},
			// 验证输入信息
			check_str: function(formData, rule) {
				var checkRes = graceChecker.check(formData, rule);
				// console.log(checkRes)
				if (!checkRes)
					uni.showToast({
						title: graceChecker.error,
						icon: "none"
					});
				return checkRes;
			},
			formSubmit: function(e) {
				let _this = this;
				console.log(e.detail.value);
				//进行表单检查
				var formData = e.detail.value;
				//定义表单规则
				var rule = [{
						name: "phone",
						checkType: "phoneno",						
						errorMsg: "请输入正确的手机号"
					},
					{
						name: "code",
						checkType: "notnull",
						checkRule: "",
						errorMsg: "验证码不能为空"
					},
					{
						name: "txt",
						checkType: "notnull",
						checkRule: "",
						errorMsg: "留言不能为空"
					},
				];
				var checkRes = this.check_str(formData, rule)
				if (checkRes) {
					let data = {
						phone: formData.phone,
						content: formData.txt,
						time: new Date().getTime()
					};
					this.$request.api_request('sms_query', data).then(function(rt) {
						// console.log(rt.result.code)
						if (rt == undefined || rt.result.code.toLowerCase() != formData.code.toLowerCase()) {
							_this.$functions.alert('验证码不正确')
							return;
						}
						_this.$request.api_request('jm_msg', data).then(function(rt) {
							if (rt.status) {
								_this.$functions.setCache('phoneVerify', true);
								_this.$refs.dialogInput.close();
								_this.$functions.alert('提交成功，稍后会有客服与您联系');
							} else
								_this.$functions.alert(data.msg);
						})
					})
				} else {
					this.$functions.alert(graceChecker.error);
				}
			},		
			/**
			 * 对话框取消按钮
			 */
			dialogClose(done) {
				this.msgType = 'info'
				this.message = '点击了对话框的取消按钮'
				this.$refs.dialogInput.close()

			},
			goShow: function(e) {
				this.$refs.dialogInput.open();
				console.log('openForm');
			},
			//发送验证码
			sendCode() {
				var _this = this;
				var sendStr = _this.send;
				_this.send = "发送中..."
				var request_data = {
					'phone': this.phone
				};
				console.log(request_data)
				//定义表单规则
				var rule = [{
					name: "phone",
					checkType: "phoneno",
					errorMsg: "请输入正确的手机号"
				}];
				var checkRes = this.check_str(request_data, rule);
				if (checkRes) {
					_this.disabled = true;
					this.$request.request(this.$config.smsUrl, request_data).then(function(data) {
						// console.log(data);						
						// 倒计时效果
						var time = 1 * 60; //时间为3min，可以按情况更改 
						var timer = setInterval(fun, 1000); //设置定时器 							
						function fun() {
							time--;
							if (time >= 0) {
								_this.send = time + "s";
							} else if (time < 0) {
								_this.send = "重新发送";
								_this.disabled = false; //倒计时结束能够重新点击发送的按钮 
								clearInterval(timer); //清除定时器 
								time = 10; //设置循环重新开始条件 								
							}
						}
					})
				} else {
					_this.send = sendStr;
				}
				// 防止form提交
				return false
			}
		}
	}
</script>

<style lang="scss">
	@import "@/static/css/common0.scss";
	@import '@/static/css/online/tc.css';
</style>
